<template>
	<view>
		<view class="box_bg"
			:style="'background: url('+ u_imgPath + 'shouye/indexBg.png'+ ') repeat-y 0 0 / 100% auto;'">

		</view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @up="upCallback">
			<view class="two-list">
				<view class="two-item" v-for="(item,index) in listdata" :key="index"
					:style="'background: url('+ u_imgPath + 'shouye/shop_item.png'+ ') repeat-y 0 0 / 100% 100%;'"
					@click="toDetail(item.id)">
					<view class="img-wrap">
						<image :src="item.image" mode=""></image>
					</view>
					<view class="item-info">
						<view class="title hang2">
							{{item.title}}
						</view>
						<view class="price">
							<view class="price-l">￥<text>{{item.price}}</text></view>
							<view class=" price-r">销量:{{item.sale_num}}</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				c_imgPath: '/static/',
				u_imgPath: 'https://qt.yhemall.com/',
				listdata: null,
				downOption: {
					use: false
				},
			}
		},
		methods: {
			toDetail(id) {
				uni.navigateTo({
					url: '/pages/shop/detail?id=' + id
				})
			},
			upCallback(page) {
				//联网加载数据
				this.loadData(page.num);
			},

			loadData(pageNo) {
				this.req({
					url: 'integralshop_index',
					data: {
						page: pageNo,
						category_id: this.tabId,
						user_id: uni.getStorageSync('userinfo').ID ? uni.getStorageSync('userinfo').ID : ''
					},
					success: res => {
						if (pageNo == 1) {
							this.listdata = res.data.data;
						} else {
							this.listdata = this.listdata.concat(res.data.data);
						}
						this.mescroll.endByPage(res.data.data.length, res.data.last_page);
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.two-list {
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.two-item {
			width: 330rpx;
			height: 430rpx;
			margin-bottom: 20rpx;
			box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(0, 0, 0, 0.06);
			padding: 20rpx 0;

			.img-wrap {
				width: 290rpx;
				height: 290rpx;
				margin: auto;
				position: relative;
				border-radius: 18rpx;
				overflow: hidden;

				image {
					width: 290rpx;
					height: 290rpx;
				}
			}

			.item-info {
				padding: 16rpx 26rpx;

				.title {
					height: 80rpx;
					line-height: 40rpx;
					color: #FFFFFF;
				}

				.price {
					display: flex;
					align-items: center;

					.price-l {
						flex: 1;
						color: #BC66FF;
						font-size: 26rpx;

						text {
							font-size: 32rpx;
						}
					}

					.price-r {
						color: #FFFFFF;
						font-size: 20rpx;
					}
				}
			}
		}
	}
</style>